<template>

	<div class="container-fluid" style="background-color: #F6F6F6;">
		<div class="row">
			<div class="col-5" style="height: 100px;text-align: center;">
				<br>
				<h1 style="font-family: 'Stencil';">{{RUNOOB}}<span style="color: #96B97D;">{{com}}</span></h1>
			</div>
			<div class="col-6">
				<form action="">
					<br>
					<input type="text" placeholder="搜索...">
				</form>
			</div>
		</div>
		<div class="row" style="background-color: #96B97D;">
			<div class="col-9" style="margin: 0 auto;">
				<ul class="ul1">
					<li v-for="item in items">
						<a href="#">{{item}}</a>
					</li>
				</ul>
			</div>
		</div>
		<br>
		<div class="row" style="height: 540px;">
			<div class="col-1" style="text-align: center;margin-left: 170px;">
				<ul class="ul2">
					<li v-for="item2 in items2">
						{{item2}}
					</li>
				</ul>
			</div>
			<div class="col-7" style="margin-left: 30px;">
				<h2 style="font-family: '华文中宋';"><span style="color: #96B97D;">{{uid}}</span>{{name}}</h2>
				<iframe src="https://www.runoob.com/html/html-tutorial.html" width="100%" height="480px"></iframe>
			</div>
			<div class="col-2">
				<ul class="ul2">
					<li v-for="item1 in items1">
						{{item1}}
					</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		methods: {


		},
		data() {
			return {

				title: 'Runoob.COM',
				items: [
					'首页',
					'HTML',
					'CSS',
					'JAVASCRIPT',
					'VUE',
					'NOOEJS',
					'PYTHON3',
					'PYTHON2',
					'JAVA',
					'C',
					'C++',
				],
				items2: [
					'HTML 教程',
					'HTML 简介',
					'HTML 基础',
					'HTML 元素',
					'HTML 属性',
					'HTML 标题',
					'HTML 段落',
					'HTML 链接',
					'HTML 头部',
					'HTML CSS',
					'HTML 图像',
					'HTML 表格',
					'HTML 列表',

				],


				leftTitle: 'HTML 教程',
				items1: [
					'分类导航',
					'HTML/CSS',
					'JavaScript',
					'服务端',
					'数据库',
					'数据分析',
					'移动端',
					'XML教程',
					'ASP.NET',
					'Web Service',
					'开发工具',
					'网站建设'
				],
				uid: '28',
				name: '卢德柱',
				RUNOOB: 'RUNOOB',
				com: '.com',





			}
		}
	}
</script>



<style>
	* {
		padding: 0;
		margin: 0;
	}

	form input {
		width: 450px;
		height: 40px;
		padding-left: 10px;
		border-radius: 5px;
		float: right;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	.ul1 li {

		list-style-type: none;
		display: inline;
		float: left;

		padding: 10px 32px;

	}

	.ul1 li:hover {
		background-color: #fff;
	}

	.ul2 li {
		list-style-type: none;
		padding: 5px;
	}

	p {
		margin-left: 30px;
		display: inline;
		background-color: #FBFBFB;
		padding: 7px 20px;
	}

	p:hover {
		background-color: #ECECEC;
	}
</style>
<style type="text/css" scoped="scoped">
	@import url("https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css");
</style>
